<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge" >
    <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>{$onlineRow['room_name']}_直播间</title>
    {js:jquery}
    {js:cookie}
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
    <script type="text/javascript" src="http://player.alicdn.com/resource/player/lib/flexible.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <link rel="stylesheet" href="{webroot:plugins/tencent_live/Theme/mobile/css/mobile.css}"/>
    <script type="text/javascript" src="{webroot:plugins/tencent_live/Theme/mobile/js/live.js}"></script>
    <script src="//cdn.ronghub.com/RongIMLib-2.5.0.js"></script>
    <script type="text/javascript" src="{webroot:plugins/tencent_live/public/js/rongInit.js}"></script>
    <script>
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            WeixinJSBridge.call('hideToolbar');
            WeixinJSBridge.call('hideOptionMenu');
        });
    </script>
    {echo:'<script>sellerInfo = '.JSON::encode($sellerInfo).' </script>'}
    {echo:'<script>UserInfo = '.JSON::encode($UserInfo).' </script>'}
    {echo:'<script>SellerId = '.$seller_id.' </script>'}
    {echo:'<script>playUrl = "'.$playUrl.'" </script>'}
    {echo:'<script>onlineRow = '.JSON::encode($onlineRow).' </script>'}
    {echo:'<script>createTime = "'.date("Y-m-d").'" </script>'}
</head>
<body>
<div class="player-area " >
    <div class="video-header">
        <div class="author author-round cfix">
            <img class="user-head-img">
            <div class="user-info">
                <div class="user-name"></div>
                <div class="audience">
                    <p class="audience-img">
                        <span class="audience-count">0</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="audience-detail"></div>
        <div class="favorite-info">
            <input type="hidden" id="isFollow" value="{$isFollow}">
            <div class="favorite-img">
                {if:$isFollow == 1}
                已关注
                {else:}
                +关注
                {/if}
            </div>
        </div>
    </div>

    <div  class="prism-player" id="J_prismPlayer" style="width:100%; height:100%">
    </div>

    <div class="comment-list"  style="-webkit-overflow-scrolling: touch;overflow-scrolling: touch;overflow-y: auto;
">
        <div class="comment-container"></div>
    </div>
    <div class="goods_list" style="-webkit-overflow-scrolling: touch;overflow-scrolling: touch;">
        <ul>
            {foreach:items = $goods}
            <li>
                <a href="{url:/site/products/id/$item['goods_id']}">
                    <img src="{url:$item['img']}" alt="">
                    <span class="flex">￥{$item['sell_price']}</span>
                </a>
            </li>
            {/foreach}
        </ul>
    </div>
    <div class="favorite-animation-container">
    </div>
</div>
<div class="comment-textbox ">
    <div class="send-container">
        <img class="favoriate-send" src="/plugins/tencent_live/Theme/mobile/images/xin.png"></img>
        <!--<div class="favoriate-send" style="width: 36px;height: 36px;"></div>-->
        <div class="send-btn">发送</div>
        <input type="text" class="send-txt" placeholder='来说点什么吧...' value="">
    </div>
</div>

<div class="loading-container ">
    <div class='loading'></div>
</div>
</body>
<script>
    $(document).ready(function(){
        //融云初始化
        var params = {
            appKey : '{$RongAppKey}',
            token :  '{$RongToken}',
            RoomId : 'room_{$seller_id}'
        };
        RongInit(params);

        //关注事件
        $('.favorite-info').on('click',function () {
            if(UserInfo.visitor == 1){
                window.location = '/simple/login?&callback=/site/live_show/seller_id/'+SellerId;
                return;
            }
            var isFollow = $('#isFollow').val();
            if(isFollow == 1){
                var url = '{url:/ucenter/live_follow_cancel}';
            }else{
                var url = '{url:/ucenter/live_follow}';
            }

            if(isFollow == 1){
                $('.favorite-img').html('+关注');
            }else{
                $('.favorite-img').html('已关注');
                var msg = '关注了直播';
                commentBuffer.add({'name':'{$UserInfo["name"]}','comment':msg});
            }

            $.getJSON(url,{"seller_id":SellerId,'ajax':1},function(json)
            {
                if(json.result == 'success')
                {
                    if(isFollow == 1){
                        $('#isFollow').val(0);
                    }else{
                        $('#isFollow').val(1);
                        SendMessage(msg,'{echo:JSON::encode($UserInfo)}','room_{$seller_id}')
                    }
                }
            });
        });

    });

    //人气
    window.setInterval(function () {
        getChatRoomInfo('room_{$seller_id}');
    },5000);

    //人气回调
    function count_num(num) {
        header._updateViewNumber(num);
    }

    //头像
    function count_head_ico(userInfos) {
        if (userInfos.length > 0){
            var ids = '';
            for (i =0;i<userInfos.length;i++){
                 ids += userInfos[i]['id']+','
            }
            $.getJSON('{url:/site/live_headico}',{'ids':ids},function (json) {
                if(json.result == 'success')
                {
                    if(json.data.length > 0){
                        var headHtml = '';
                        for(i=0;i<json.data.length;i++){
                            headHtml += '<img class="audience-header" src="/'+json.data[i].head_ico+'" data-uid="'+json.data[i].head_id+'">';
                        }
                        $('.audience-detail').html(headHtml);
                    }
                }
            });
        }
    }
    //欢迎语
    function WelcomeRoom() {
        var msg = '进入了直播间';
        commentBuffer.add({'name':'{$UserInfo["name"]}','comment':msg});
        SendMessage(msg,'{echo:JSON::encode($UserInfo)}','room_{$seller_id}')
    }

    //获取新消息回调
    function onReceivedMessage(content,extra) {
        if(content == '点亮了【爱心】'){
            $('.comment-textbox .favoriate-send').trigger('click')
        }
        commentBuffer.add({'name':extra.name,'comment':content});
    }

    //离开直播间
    window.onbeforeunload = function(event) {
        quitChatRoom('room_{$seller_id}')
    };

    //点击爱心事件
    function getXin() {
        if(!$.cookie('getXin')){
            var msg = '点亮了【爱心】';
            commentBuffer.add({'name':'{$UserInfo["name"]}','comment':msg});
            SendMessage(msg,'{echo:JSON::encode($UserInfo)}','room_{$seller_id}')
            $.cookie('getXin',1);
        }
    }

    //微信页面BUG处理
    weChatInputBug();
</script>
</html>